<script>
import { reactive, toRefs } from "vue";
import FlowhE10to14 from "@/components/Charts/LineCharts/inoutFlow/E/FlowhE10to14.vue";
import FlowhE14to18 from "@/components/Charts/LineCharts/inoutFlow/E/FlowhE14to18.vue";
import FlowhE18to22 from "@/components/Charts/LineCharts/inoutFlow/E/FlowhE18to22.vue";
import GenBagE from "@/components/Charts/LineCharts/inoutFlow/E/GenBagE.vue";
export default {
  components: {FlowhE10to14,FlowhE14to18,FlowhE18to22,GenBagE,
  },
  setup() {
    const state = reactive({
      labelListE10to14: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      labelListE14to18: ["14:00", "15:00", "16:00", "17:00", "18:00"],
      labelListE18to22: ["18:00", "19:00", "20:00", "21:00", "22:00"],
      dataListFlowE10to14: [
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      ],
      dataListFlowE14to18:[
      160, 208, 125, 109, 170, 159, 209, 109, 201, 175,      
      ],
      dataListFlowE18to22:[
      100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      ],
      dataListGBE:[100, 209, 109, 201],
    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:50%">
   <FlowhE10to14 :labelListE10to14="labelListE10to14" :dataListFlowE10to14="dataListFlowE10to14" />
   <FlowhE14to18 :labelListE14to18="labelListE14to18" :dataListFlowE14to18="dataListFlowE14to18" />
   <FlowhE18to22 :labelListE18to22="labelListE18to22" :dataListFlowE18to22="dataListFlowE18to22" />
 </div>
 <div style="display: flex; height:50%">
  <GenBagE :dataListGBE="dataListGBE" />
 </div>
</template>
<style scoped>
</style>

